<template>
  <div class="main-body">
    <Header />
    <div class="box-nav">
      <van-icon name="arrow-left" size="0.5rem" />
      <span>登录</span>
    </div>

    <div class="login-body">
      <van-cell is-link @click="showPicker = true">
        <div class="country-icon">
          <img src="../assets/img/country.png" alt="" />
        </div>
        <div class="txt">{{ value }}</div>
        <van-icon name="arrow-down" class="van-cell__right" />
      </van-cell>
      <van-popup
        v-model="showPicker"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>

      <div class="phone-box">
        <div class="item-fix">+86</div>
        <input
          type="tel"
          placeholder="请输入账号"
          maxlength="11"
          class="txt"
          v-model="userInfo.phone"
        />
      </div>
      <div class="password-box">
        <img src="../assets/img/key.png" alt="" class="item-fix" />
        <input
          type="password"
          placeholder="请输入密码"
          maxlength="20"
          class="txt"
          v-model="userInfo.pass"
        />
      </div>
      <div class="div-status">
        <van-checkbox
          v-model="checked"
          shape="square"
          icon-size="0.3rem"
        ></van-checkbox>
        <p>记住我的状态</p>
        <p>找回密码</p>
      </div>
      <div class="div-btn" @click="handleLogin">登录</div>
      <div class="div-other-btn">
        <router-link to="/reg">快速注册</router-link>
      </div>
    </div>
  </div>
</template>



<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import Header from "../components/Header.vue";
import { userRegCheck } from "../api/user";
export default {
  components: {
    Header,
  },
  data() {
    return {
      checked: false,
      value: "中国",
      showPicker: false,
      columns: [
        "澳大利亚",
        "韩国",
        "加拿大",
        "马来西亚",
        "美国",
        "日本",
        "新加坡",
        "英国",
        "中国",
        "中国香港",
        "中国澳门",
        "中国台湾",
      ],
      userInfo: {
        phone: "",
        pass: "",
      },
    };
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    handleLogin() {
      let { phone, pass } = this.userInfo;
      userRegCheck(this.userInfo).then((res) => {
        // console.log(res.data);
        // console.log(this.userInfo);
        let userInfoList = res.data;
        for (let i = 0; i < userInfoList.length; i++) {
          console.log(userInfoList)
          if (
            phone == userInfoList[i].phone &&
            pass == userInfoList[i].pass
          ) {
            Toast.success({
              message: "登录成功",
              position: "top",
            });
            // console.log(this)
            if (userInfoList.length) {
              this.$store.commit("user/initUserInfoMut", userInfoList[i]);
              this.$router.push("/center");
            }
            // return;
          } else {
            Toast.fail({
              message: "用户名或密码错误",
              position: "top",
            });
            history.go(0);
            // return;
          }
          return
        }
      });
    },
  },
};
</script>

<style src='../assets/css/login.css' scoped>
</style>
<style lang="less" scoped>
/deep/.van-picker__toolbar {
  width: 100%;
  height: 1.04rem;
  line-height: 1.04rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.36rem;
}
/deep/.van-picker__cancel {
  text-align: center;
  background-color: #f1f1f1;
  flex: 1;
}
/deep/.van-picker__confirm {
  color: #fff;
  text-align: center;
  background-color: #414141;
  flex: 1;
}
</style>
